<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>三级联动</title>
</head>
<body>

  <select name="省份" id="province">
    <option value="" >省份</option>
    <!-- <option value="">广东</option> -->
  </select>
  <select name="城市" id="city" style="width: 60px;">
    <option value="" >城市</option>
    <!-- <option value="">广州</option> -->
  </select>
  <select name="区县" id="area" style="width: 60px;">
    <option value="" >区县</option>
    <!-- <option value="">天河区</option> -->
  </select>



  <script>
    let province = document.querySelector("#province");
    let city = document.querySelector("#city");
    let area = document.querySelector("#area");
    let option = document.querySelector("option");

    let arrProvince = [];
    let arrCity = [];
    let i = 0;//初始化变量


    fetch("./city.json").then(function(response) {
      return response.json();
    }).then(function (data) {
      console.log(data);//所有数据

      //-----------省------------------
      //遍历对象，并把每一个值推入option里面
      for(let key in data) {
        province.innerHTML += `<option value="${i}">${key}</option>`
        i++;
        arrProvince.push(data[key]);
      }
      // console.log(arrProvince);//获取所有省会，包括区/县数组

      //------------市----------------
      province.addEventListener("change" , function() {//设置change监听事件，当province里的数据发生改变时，触发change事件
        arrCity=[];//没切换一个省会，上一个城市的名就要清空
        city.innerHTML = `<option value="" >城市</option>`;
        area.innerHTML = `<option value="" >区/县</option>`;//当省会的城市改变就要清空上一个城市的内容信息
        i=0;//初始化下标的值
        arrProvince.forEach(function(item,index){
          if(province.value == index) {//如果value值和arrProvince里的下标值相同,再进行以下操作
            for(let key1 in item) {//遍历当前对象
              // console.log(item);//当前对象
              // console.log(key1);//当前对象的键名
              city.innerHTML += `<option value="${i}">${key1}</option>`
              i++;
              arrCity.push(item[key1]);
              console.log(arrCity);

            // -------------县/区---------------
              city.addEventListener("change",function(){
                area.innerHTML = `<option value="">区/县</option>`;
                i=0;
                arrCity.forEach(function(item , index){
                  for(let key1 in item) {
                    if(city.value == index) {
                      area.innerHTML += `<option value="${i}">${item[key1]}</option>`
                      i++;
                    }
                  }
                })
              })
            }
          }
        })
      })
    }).catch(function (error) {
      console.log(error);
    });


  </script>
</body>
</html>